<template>
    <div class="content-wrapp">
        <el-form ref="formData" :model="formData" label-width="60px">
            <el-form-item label-width="0">
                <el-input v-model="formData.filterName" placeholder="搜索部门" size="small">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="loginName">
                <el-input v-model="formData.loginName" placeholder="请输入" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status" v-if="editEnabel">
                <el-select v-model="formData.status" placeholder="请选择活动区域" size="small">
                    <el-option label="全部" value></el-option>
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="20px">
                <el-button type="primary" icon="el-icon-search" size="small" @click="getUserData">搜索</el-button>
                <el-button
                    icon="el-icon-circle-close"
                    size="small"
                    @click="$refs['formData'].resetFields()"
                >重置</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="5">
                <el-tree
                    ref="tree"
                    :data="deptTree"
                    :props="defaultProps"
                    default-expand-all
                    highlight-current
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                ></el-tree>
            </el-col>
            <el-col :span="19">
                <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    size="small"
                    v-if="addEnable"
                    @click="$refs.modal.add()"
                >新增用户</el-button>
                <el-table :data="tableData" v-loading="loading">
                    <el-table-column prop="loginName" label="用户名" width="120"></el-table-column>
                    <el-table-column prop="userName" label="昵称" width="100"></el-table-column>
                    <el-table-column prop="status" label="状态" width="80" v-if="editEnabel">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.status"
                                active-value="0"
                                inactive-value="1"
                                :disabled="$store.getters.userId === scope.row.userId"
                                @change="onChangeStatus(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dept" label="部门" width="100"> 
                        <template slot-scope="scope">
                            <div  v-if="scope.row.dept">
                                {{scope.row.dept.deptName}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dept" label="岗位">
                        <template slot-scope="scope">
                            <div v-if="scope.row.posts && scope.row.posts.length > 0">
                                <span v-for="(item,index) in scope.row.posts" :key="item.postId" >{{item.postName}}<i v-if="scope.row.posts.length-1 > index" style="margin: 0 5px">/</i></span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="240">
                        <template slot-scope="scope">
                            <el-button
                                type="success"
                                size="mini"
                                @click="$refs.modal.edit(scope.row)"
                                v-if="editEnabel"
                            >编辑</el-button>
                            <el-button
                                type="danger"
                                size="mini"
                                v-if="removeEnable"
                                @click="removeUser(scope.row.userId)"
                            >删除</el-button>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="$refs.pwdmodal.edit(scope.row)"
                                v-if="resetPwdEnabel"
                            >重置密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <user-modal ref="modal" @ok="handleOk" :deptTree="deptTree" />
        <user-pwd-modal ref="pwdmodal" />
    </div>
</template>

<script>
import {
    getUserList,
    getDeptList,
    delUser,
    changUserStatus
} from "@/api/system";
import UserModal from "./modules/UserModal";
import UserPwdModal from "./modules/UserPwdModal";
import { checkPermission } from "@/utils/permissions";
const ERR_OK = 200;
export default {
    components: {
        UserModal,
        UserPwdModal
    },
    data() {
        return {
            tableData: [],
            deptTree: [],
            defaultProps: {
                children: "children",
                label: "title"
            },
            formData: {
                // pagenum: 1,
                // pagesize: 10,
                deptId: "",
                status: "",
                loginName: "",
                filterName: ""
            },
            loading: true,
            addEnable: checkPermission("system:user:add"),
            editEnabel: checkPermission("system:user:edit"),
            resetPwdEnabel: checkPermission("system:user:resetPwd"),
            removeEnable: checkPermission("system:user:remove")
        };
    },
    created() {
        this.getDeptList();
        this.getUserData();
    },
    watch: {
        "formData.filterName"(val) {
            this.$refs.tree.filter(val);
        }
    }, 
    methods: {
        getDeptList() {
            getDeptList().then(res => {
                const data = res.data.rows;
                let deptTree = []
                this.buildtree(data, deptTree, 0);
                this.deptTree.push({
                    key: 0,
                    value: 0,
                    title: '理德铭',
                    scopedSlots: { title: "title" },
                    children: deptTree
                })
                this.expandedKeys = data.map(m => m.parentId);
                this.dataList = data.map(m => {
                    return { key: m.deptId, title: m.deptName };
                });
            });
        },
        buildtree(list, arr, parentId) {
            list.forEach(item => {
                if (item.parentId === parentId) {
                    var child = {
                        key: item.deptId,
                        value: item.deptId,
                        title: item.deptName,
                        scopedSlots: { title: "title" },
                        children: []
                    };
                    this.buildtree(list, child.children, item.deptId);
                    if (child.children.length === 0) {
                        delete child.children;
                    }
                    arr.push(child);
                }
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.title.indexOf(value) !== -1;
        },
        getUserData() {
            this.loading = true;
            getUserList(this.formData).then(res => {
                this.tableData = res.data.rows;
                this.loading = false;
            });
        },
        handleNodeClick(data) {
            this.formData.deptId = data.value;
            this.getUserData();
        },
        onChangeStatus(item) {
            changUserStatus({
                userId: item.userId,
                status: item.status
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success("保存成功");
                } else {
                    this.$message.error(res.data.msg);
                    item.status = item.status == "1" ? "0" : "1";
                }
            });
        },
        removeUser(userId) {
            this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    delUser({ ids: userId }).then(res => {
                        if (res.data.code === ERR_OK) {
                            this.$message.success(`删除成功`);
                            this.handleOk();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                })
                .catch(() => {});
        },
        handleOk() {
            this.getUserData();
        }
    }
};
</script>


<style lang="scss" scoped>
.content-wrapp {
    padding: 20px;
    .el-form-item {
        display: inline-block;
        margin-bottom: 10px;
    }
}
</style>
